<template>
    <div class="brand-box">
        <!--查询表单-->
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="品牌名称">
                    <el-input placeholder="品牌名称" v-model="searchParams.brandName"></el-input>
                </el-form-item>

                <el-form-item label="品牌名称">
                    <el-input placeholder="品牌名称" v-model="searchParams.brandName"></el-input>
                </el-form-item>

                <el-form-item label="日期">
                    <el-date-picker
                            v-model="pickerOptions.startArrayDate"
                            @change="chooseTime"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="left">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findPage">查询</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--操作按钮-->
        <div class="crud-box">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogVisible=true,formData={},imageUrl=''">新建</el-button>
            <el-button type="success" icon="el-icon-edit" size="mini">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </div>
        <!--table展示数据-->
        <div class="table-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="checkBoxSelectionChange"
            >

                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandName"
                        label="品牌名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandDesc"
                        label="品牌描述"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandSite"
                        label="品牌站点">
                    <template v-slot="suibianxie">
                        <a :href="suibianxie.row.brandSite">{{suibianxie.row.brandSite}}</a>
                    </template>

                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandLogo"
                        label="品牌图标">
                    <template v-slot="obj">
                        <img :src="obj.row.brandLogo" height="35px">
                    </template>

                </el-table-column>
                <el-table-column
                        align="center"
                        prop="address"
                        label="操作">

                    <template v-slot="obj">
                        <el-button type="success" icon="el-icon-edit" size="mini"></el-button>
                        <el-popconfirm
                                confirm-button-text='确认'
                                cancel-button-text='取消'
                                @confirm="deleteById"
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定删除这一条数据吗？"
                        >
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                       @click="formData.id=obj.row.id"></el-button>
                        </el-popconfirm>
                    </template>


                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page-box">
            <el-pagination
                    background
                    :current-page="searchParams.currentPage"
                    :page-size="searchParams.pageSize"
                    layout="prev, pager, next"
                    @current-change="currentPageChange"
                    :total="total">
            </el-pagination>
        </div>



        <!--弹框-->
        <div class="dialog-box">
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="40%"
                   >
                <el-form ref="form" :model="formData" label-width="240px">
                    <el-form-item label="品牌名称" size="small">
                        <el-input v-model="formData.brandName"  style="width: 240px;"></el-input>
                    </el-form-item>



                    <el-form-item label="品牌站点">
                        <el-input v-model="formData.brandSite" size="small" style="width: 240px;"></el-input>
                    </el-form-item>

                    <el-form-item label="品牌图标">
                        <el-upload
                                class="avatar-uploader"
                                :http-request="getImgStr"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                               >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                        <!--<el-input v-model="formData.brandLogo" size="small" style="width: 240px;"></el-input>-->
                    </el-form-item>

                    <el-form-item label="品牌描述">
                        <el-input v-model="formData.brandDesc" size="small" style="width: 240px;"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false,addOrEdit()" size="small">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    import brand from './index'

    export default brand;
</script>

<style  src="./index.scss" lang="scss">
</style>